<template>
  <el-container style="height: 100%">
    <!-- 头部区域 -->
    <el-header class="header-box">
      <div style="width: 150px; height: 45px">
        <router-link to="/home">
          <img src="./../../assets/logo.png" alt="首页" class="logo" />
        </router-link>
      </div>

      <el-menu :default-active="navigationIndex" style="border: 0" mode="horizontal" :router="true">
        <el-menu-item v-for="item in routerPath.children" :key="item.id" :index="item.path">{{ item.title}}</el-menu-item>
      </el-menu>


      <el-dropdown trigger="click" class="right-menu">
        <span class="el-dropdown-link" style="line-height: 44px">
          <el-avatar :size="30" src="/img3.gif" style="margin-right: 8px;vertical-align: middle;"></el-avatar>
          <span>{{ userData.username }}</span><i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown" class="header-user-dropdown">
          <el-dropdown-item disabled>{{ userData.level_name }}</el-dropdown-item>
          <el-dropdown-item><router-link :to="{path:'/administratorDetail', query:{id:userData.user_id}}">账号信息</router-link></el-dropdown-item>
          <el-dropdown-item divided @click.native="loginOut">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>
    <!-- 内容部分 -->
    <el-container>
      <router-view></router-view>
    </el-container>
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      navigationIndex: "",
      userData: {},
      spanStyle: false,
      routerPath: []
    };
  },
  methods: {
    loginOut() {
      this.$confirm("确定退出登录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        // 清除浏览器存储 包括token
        this.$tool.clearSession()
        this.$message({
          type: "success",
          message: "已退出登录"
        });
      });
    },
  },
  mounted() {
    this.userData = JSON.parse(localStorage.getItem('userData'))
    if (!this.userData.username) {
      this.$router.push('/login')
    }
    this.routerPath = JSON.parse(localStorage.getItem('routerPath'))
    this.navigationIndex = this.$route.matched[1].path


  },
  watch: {
  }
};
</script>

<style lang="less" scoped>
.header-box {
  display: flex;
  height: 45px !important;
  padding: 0;
  background-color: #fff;
  justify-content: space-between;
  border-bottom: 1px solid rgb(195 189 189 / 25%);
  background-color: #fff;
  box-shadow: 0 2px 4px rgb(0 0 0 / 8%);
  z-index: 1;

  .logo {
    width: 100%;
    height: 100%;
  }

  .logo:hover {
    cursor: pointer;
  }

  .el-menu-item {
    height: 100% !important;
    line-height: 45px !important;
  }

  .right-menu {
    //height: 100%;
    //display: flex;
    //align-items: center;
    cursor: pointer;
    margin-right: 20px;
  }

}
.header-user-dropdown{
  min-width: 120px;
}
.contentBox {
  width: 150px;
}
</style>